<template>
  <view v-if="visible" class="custom-modal-overlay" @tap="handleOverlayTap">
    <view class="custom-modal-container" :class="[type, size]" @tap.stop>
      <view class="modal-header">
        <text class="modal-icon">{{ icon }}</text>
        <text class="modal-title">{{ title }}</text>
      </view>
      <view class="modal-content">
        <text class="modal-message">{{ message }}</text>
      </view>
      <view class="modal-footer">
        <button 
          v-if="showCancel" 
          class="modal-btn modal-btn-cancel" 
          @tap="handleCancel"
          :style="{ color: cancelColor }"
        >
          {{ cancelText }}
        </button>
        <button 
          class="modal-btn modal-btn-confirm" 
          @tap="handleConfirm"
          :style="{ backgroundColor: confirmColor, color: '#ffffff' }"
        >
          {{ confirmText }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'info' // success, error, warning, info
    },
    size: {
      type: String,
      default: 'normal' // small, normal, large
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmColor: {
      type: String,
      default: '#2563eb'
    },
    cancelColor: {
      type: String,
      default: '#64748b'
    },
    closeOnOverlay: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    defaultIcon() {
      const icons = {
        success: '🎉',
        error: '❌',
        warning: '⚠️',
        info: '💡'
      }
      return icons[this.type] || icons.info
    },
    defaultTitle() {
      const titles = {
        success: '操作成功',
        error: '操作失败',
        warning: '警告信息',
        info: '提示信息'
      }
      return titles[this.type] || titles.info
    }
  },
  methods: {
    handleOverlayTap() {
      if (this.closeOnOverlay) {
        this.handleCancel()
      }
    },
    handleConfirm() {
      this.$emit('confirm')
      this.close()
    },
    handleCancel() {
      this.$emit('cancel')
      this.close()
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-out;
}

.custom-modal-container {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
  min-width: 280rpx;
  max-width: 600rpx;
  animation: slideUp 0.3s ease-out;
  
  &.small {
    width: 400rpx;
  }
  
  &.normal {
    width: 500rpx;
  }
  
  &.large {
    width: 600rpx;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 1rpx solid #f1f5f9;
  
  .modal-icon {
    font-size: 40rpx;
    margin-right: 16rpx;
  }
  
  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1f2937;
  }
}

.modal-content {
  padding: 30rpx 40rpx;
  
  .modal-message {
    font-size: 28rpx;
    line-height: 1.6;
    color: #374151;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
  }
}

.modal-footer {
  display: flex;
  padding: 20rpx 40rpx 40rpx;
  gap: 20rpx;
  
  .modal-btn {
    flex: 1;
    padding: 24rpx 32rpx;
    border: none;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: 500;
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.98);
    }
    
    &.modal-btn-cancel {
      background-color: #f8fafc;
      color: #64748b;
      border: 2rpx solid #e2e8f0;
      
      &:hover {
        background-color: #f1f5f9;
      }
    }
    
    &.modal-btn-confirm {
      background-color: #2563eb;
      color: #ffffff;
      
      &:hover {
        opacity: 0.9;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>